<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script type="text/javascript" th:inline="javascript">
        function clear() {
            $("#id").val("");
            $("#name").val("");
            $("#age").val("");
            $("#male").prop('checked',false);
            $("#female").prop('checked',false);
            $("#phone").val("");
            $("#address").val("");
        }

        function add() {
            modify = 1;
            clear();
            $(".modal-title").html("家长信息添加");
        }

        function edit(id) {
            modify = 0;
            $(".modal-title").html("家长信息编辑");
            prep(id);
        }

        function prep(id){
            $.get("/parent/query",{id:id},function(par){
                let parent = par;
                $("#id").val(id);
                $("#name").val(parent.name);
                $("#age").val(parent.age);
                if (parent.gender==0){
                    $("#male").prop('checked',true);
                }else if (parent.gender==1){
                    $("#female").prop('checked',true);
                }
                $("#phone").val(parent.phone);
                $("#address").val(parent.address);
            },"json");
        }

        function save() {
            let name = $("#name").val();
            let age = $("#age").val();
            let address = $("#address").val();
            let maleCheck = document.getElementById("male").checked;
            let femaleCheck = document.getElementById("female").checked;
            if (name == ''){
                alert("请输入姓名!");
            } else if (age == ''){
                alert("请输入年龄!");
            } else if (!maleCheck && !femaleCheck){
                alert("请选择性别!");
            }else if (address == ''){
                alert("请输入地址!");
            } else{
                let formData = new FormData($("#editForm")[0]);
                $.ajax({
                    url: "http://localhost:313/parent/save?modify=" + modify,
                    method: "post",
                    data: formData,
                    dataType: "json",
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        $("#editModal").modal('hide');
                        location.reload();
                    }
                });
            }
        }

        function del(id) {
            if (confirm("请确认是否删除？")) {
                $.get("/parent/del", {id: id}, function (res) {
                    if (res) {
                        location.reload();
                    }
                })
            }
        }
        function search() {
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/parent/page?name=" + name;
        }

        function inputLoad(){
            let searchInput = [[${name}]];
            if (searchInput != null){
                $("#condition").val(searchInput);
            }
        }

        function homePage(){
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/parent/page?pageNum=1&name=" + name;
        }

        function prePage(){
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/parent/page?pageNum=" + [[${current - 1}]] + "&name=" + name;
        }

        function nextPage(){
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/parent/page?pageNum=" + [[${current + 1}]] + "&name=" + name;
        }

        function lastPage(){
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/parent/page?pageNum=" + [[${lastPage}]] + "&name=" + name;
        }
    </script>
</head>
<style>
    table {
        text-align: center;
    }

    #searchButton {
        position: absolute;
        margin-top: -1px;
    }
</style>
<body onload="inputLoad()">
      <h1>家长信息</h1>
      <div class="row">
          <div class="col-lg-3">
              <div class="input-group">
                  <input id="condition" type="text" class="form-control" placeholder="请输入家长名">
                  <span class="input-group-btn">
                            <button class="glyphicon glyphicon-search btn btn-default" id="searchButton" onclick="search()">
                            </button>
                    </span>
              </div>
          </div>
      </div>
      <button th:if="${session.user.identityNum == 3}" id="add" class="btn btn-success" data-toggle="modal" data-target="#editModal" onclick="add()">新增</button>
      <table class="table  table-bordered table-hover">
          <tr>
              <td>姓名</td>
              <td>性别</td>
              <td>年龄</td>
              <td>电话</td>
              <td>地址</td>
              <td>孩子信息</td>
              <td th:if="${session.user.identityNum == 3}">操作</td>
          </tr>
          <tr th:each="parent:${parents}">
              <td th:text="${parent.name}"></td>
              <td th:if="${parent.gender} eq '0'">男</td>
              <td th:if="${parent.gender} eq '1'">女</td>
              <td th:text="${parent.age}"></td>
              <td th:text="${parent.phone}"></td>
              <td th:text="${parent.address}"></td>
              <td>&nbsp;
                  <a class="glyphicon glyphicon-user" th:href="'/parent/getChild?id='+${parent.id}"></a>
              </td>
              <td th:if="${session.user.identityNum == 3}">
                  <a class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editModal"
                     th:onclick="edit([[${parent.id}]])"></a>&nbsp;&nbsp;
                  <a class="glyphicon glyphicon-trash" th:onclick="del([[${parent.id}]])"></a>
              </td>
          </tr>
          <tr>
              <td colspan="7">
                  <button class="btn btn-primary" onclick="homePage()">首页</button>&nbsp;&nbsp;<button class="btn btn-primary"
                                                                                                      onclick="prePage()">上一页
              </button>&nbsp;&nbsp;<p style="display: inline" th:text="'总共'+${total}+'条记录 当前第'+${current}+'页'"></p>&nbsp;&nbsp;<button
                      class="btn btn-primary" onclick="nextPage()">下一页
              </button>&nbsp;&nbsp;<button class="btn btn-primary" onclick="lastPage()">尾页</button>
              </td>
          </tr>
      </table>


      <div class="modal fade" tabindex="-1" role="dialog" id="editModal">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                      </button>
                      <h2 class="modal-title"></h2>
                  </div>
                  <div class="modal-body">
                      <form id="editForm">
                          <table class="table table-bordered table-striped">
                              <input id="id" class="form-control" type="hidden" name="id" hidden/>
                              <tr>
                                  <td>姓名</td>
                                  <td><input id="name" class="form-control" type="text" name="name" /></td>
                              </tr>
                              <tr>
                                  <td>年龄</td>
                                  <td><input id="age" class="form-control" type="number" name="age" /></td>
                              </tr>
                              <tr>
                                  <td>性别</td>
                                  <td><input id="male" type="radio" name="gender" value="0"/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="female" type="radio" name="gender" value="1"/>女</td>
                              </tr>
                              <tr>
                                  <td>电话</td>
                                  <td>
                                      <input id="phone" class="form-control" type="number" name="phone" />
                                  </td>
                              </tr>
                              <tr>
                                  <td>地址</td>
                                  <td><input id="address" class="form-control" type="text" name="address" /></td>
                              </tr>
                          </table>
                      </form>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  </div>
              </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
</body>
</html>